<template>
  <div class="imageContain" ref="imageContain" v-loading="loading">
    <div class="pardom" ref="temp">
      <img ref="image" src="./1.png" alt="" />
      <div class="create-div" v-show="maskShow"></div>
      <!-- 修改或者点击空白区域进行添加 -->
      <!-- <template v-if="isCreateNewText">
        <dragAdd
          v-if="!isUpdateText"
          :position="dragAddPosition"
          ref="dragAdd"
        ></dragAdd>
        <selInput :position="inputPosition" @ok="addTextNode"></selInput>
      </template> -->
      <!-- <menuVue></menuVue> -->
      <!-- <tipContentVue></tipContentVue> -->
    </div>

    <el-button @click="ceshi">测试</el-button>
    <el-button @click="rotate">旋转</el-button>
    <el-button @click="rotateDeg11">旋转角度</el-button>
  </div>
</template>

<script>
import dragAdd from "./dragRessizeAdd.vue";
import selInput from "./selInput.vue";
import menuVue from "./menu.vue";
import Queue from "./quee.js";
import tipContentVue from "./tipContent.vue";
import imgJS from "./imgjs.js";
export default {
  components: {
    dragAdd,
    selInput,
    menuVue,
    tipContentVue,
  },
  // props: {
  //   imgUrl: {
  //     type: String,
  //     default: "",
  //   },
  //   type: {
  //     type: String,
  //     default: 0, //0小图 , 1大图
  //   },
  //   positionBatch: {
  //     type: Object,
  //     default: () => {
  //       return {};
  //     },
  //   },
  // },
  data() {
    return {
      timeOut: null,
      resizeObserver: null,
      matrixData: [], //矩阵数据
      extraW: 200, //生成canvas额外加的宽
      extraH: 200, //生成canvas额外加的高
      isCreateNewText: true, //是否通过双击创建了一个新的序号以及标签内容,
      newOrderNumPosition: [], //新建标签的百分比不用c了
      loading: false,
      intersectionObserver: null,
      isUpdateText: false,
      newData: imgJS["1"],
      maskShow: false,
      work: null,
      queeArr: null,
      startTime: null,
      endTime: null,
      dragAddPosition: {}, //序号初始位置
      inputPosition: {},
      rotateDeg: 0,
      canvasRect: {},
    };
  },
  watch: {
    isCreateNewText: {
      handler(nv, ov) {
        if (nv) {
          this.$refs.temp.querySelector(".create-div").style.userSelect =
            "none";
        } else {
          this.$refs.temp.querySelector(".create-div").style.userSelect =
            "initial";
        }
      },
    },
  },
  mounted() {
    HTMLElement.prototype.setStyle = function (obj) {
      for (let key in obj) {
        this.style[key] = obj[key];
      }
    };
    this.setMask();
    this.quee = new Queue();
    //队列结束
    this.quee.setOnQueueFinish(() => {
      this.endTime = performance.now();
      console.log("Queue has finished. Callback triggered.");
      this.work && this.work.terminate();
      let durationTime = this.endTime - this.startTime;
      console.log(`代码执行了 ${durationTime} 毫秒`);
    });
    // this.intersectionObserver = new IntersectionObserver((entries) => {
    //   entries.forEach((entry) => {
    //     if (entry.isIntersecting && !entry.target.getAttribute("status")) {
    //       this.loading = true;
    //       setTimeout(() => {
    //         this.ceshi();
    //       }, 300);
    //       entry.target.setAttribute("status", true);
    //     }
    //   });
    // });
    // this.intersectionObserver.observe(this.$refs.imageContain);
  },

  methods: {
    rotate() {
      this.rotateDeg = 90;
      this.$refs.image.style.transform = `rotate(${this.rotateDeg}deg)`;
      document.querySelector(
        ".create-div"
      ).style.transform = `translate(-50% , -50%) rotate(${this.rotateDeg}deg) `;
      // this.aaaaa();
      console.log(this.positionBatch);
      this.createCanvas(this.$refs.image);
    },
    aaaaa() {
      this.newData.forEach((item) => {
        let current = JSON.parse(JSON.stringify(item));
        let img = this.$refs.image;
        this.infoArrDataHandle(item, current, this.rotateDeg, img);
      });
    },
    infoArrDataHandle(item, oldItem, rotate, img) {
      let current = oldItem;
      if (rotate == 90) {
        item.figuresTag.cx =
          img.naturalHeight - current.figuresTag.cy - current.figuresTag.h;
        item.figuresTag.cy = current.figuresTag.cx;
        item.figuresTag.w = current.figuresTag.h;
        item.figuresTag.h = current.figuresTag.w;
      } else if (rotate == 180) {
        item.figuresTag.cx =
          img.naturalWidth - current.figuresTag.cx - current.figuresTag.w;
        item.figuresTag.cy =
          img.naturalHeight - current.figuresTag.cy - current.figuresTag.h;
        item.figuresTag.w = current.figuresTag.w;
        item.figuresTag.h = current.figuresTag.h;
      } else if (rotate == 270) {
        item.figuresTag.cx = current.figuresTag.cy;
        item.figuresTag.cy =
          img.naturalWidth - current.figuresTag.cx - current.figuresTag.w;
        item.figuresTag.w = current.figuresTag.h;
        item.figuresTag.h = current.figuresTag.w;
      } else if (rotate == 0) {
        item.figuresTag.cx = current.figuresTag.cx;
        item.figuresTag.cy = current.figuresTag.cy;
        item.figuresTag.w = current.figuresTag.w;
        item.figuresTag.h = current.figuresTag.h;
      }
      item.figuresTag.oldcx = current.figuresTag.cx;
      item.figuresTag.oldcy = current.figuresTag.cy;
      item.figuresTag.oldw = current.figuresTag.w;
      item.figuresTag.oldh = current.figuresTag.h;
    },
    rotateDeg11() {
      let transform = window
        .getComputedStyle(this.$refs.image)
        .getPropertyValue("transform");
      let matrix = transform.match(/^matrix\((.+)\)$/);
      if (matrix) {
        let values = matrix[1].split(",");
        console.log(
          Math.ceil(Math.atan2(values[1], values[0]) * (180 / Math.PI))
        );
        return Math.ceil(Math.atan2(values[1], values[0]) * (180 / Math.PI));
      }
      return 0;
    },
    //设置mask
    setMask() {
      this.$refs.image.onload = () => {
        let img = this.$refs.image;
        this.createCanvas(img);
        this.maskShow = true;
        this.$nextTick(() => {
          let mask = this.$el.querySelector(".create-div");
          mask.setStyle({
            width: img.width + "px",
            height: img.height + "px",
            position: "absolute",
            background: "transparent",
          });
          this.resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
              const { width, height } = entry.contentRect;
              this.setMaskWH(mask, width, height);
            }
          });
          this.resizeObserver.observe(this.$refs.image);
        });
      };
    },
    //设置遮罩层的宽高
    setMaskWH(div, w, h) {
      div.setStyle({
        width: w + "px",
        height: h + "px",
      });
    },
    //一次性创建多个
    async ceshi() {
      this.aaaaa();
      let oldMask = this.$refs.imageContain.querySelector(".create-div");
      if (oldMask) {
        oldMask.querySelectorAll(".himm-image-child").forEach((item) => {
          item.remove();
        });
      }
      this.startTime = performance.now();
      //先走一遍所有的序号然后修改矩阵数据为2 , 为了后期不压序号
      this.newData.forEach((item, index) => {
        this.createChangeData(item, index);
      });

      this.newData
        .sort((a, b) => {
          return a.figuresTag.oldcx - b.figuresTag.oldcx;
        })
        .sort((a, b) => {
          return a.figuresTag.oldcy - b.figuresTag.oldcy;
        })

        .forEach((item, index) => {
          console.log(item.figuresTag);
          this.quee.add(this.createDiv, item, index);
        });
      console.log(this.quee, "111");

      this.loading = false;
      //创建完成之后 , 全局监听鼠标按下事件
      let temp = this.$refs.temp;
      //点击事件
      temp.addEventListener("mousedown", this.maskMouseDown);
      //双击事件
      temp.addEventListener("dblclick", this.maskDoubleclick);
    },
    //!----文本拖拽的逻辑
    //全局按下事件 用于文本标签的拖拽
    maskMouseDown(e) {
      //如果是点击文本就是文本拖拽
      if (e.target.classList.contains("himm-text")) {
        e.preventDefault();
        e.stopPropagation();
        this.himlineMouseDown(e);
      }
      //如果点击的是mask空白区域,看显示新增是不是开着呢 , 开着呢就关了
      else {
        if (this.isCreateNewText) {
          this.isCreateNewText = false;
        }
      }
    },
    himlineMouseDown(e) {
      let dom = e.target;
      let transform = dom.parentNode.parentNode.parentNode.style.transform;
      //处理方法缩小
      let scale = 1;
      if (transform.indexOf("scale") != -1) {
        let match = transform.match(/scale\(([^)]+)\)/);
        if (match) {
          scale = parseFloat(match[1].split(",")[0]);
        }
      }
      // console.log(e);
      let downX = e.clientX; //鼠标按下的坐标
      let downY = e.clientY;
      //获取原来文本标签展示的内容left或者right
      let left = null;
      let top = null;
      //使用原来的百分比来操作 ,不使用数值 ,否则放大缩小有问题
      if (dom.style.left && dom.style.left.indexOf("%") != -1) {
        left = dom.style.left;
      }
      if (dom.style.top && dom.style.top.indexOf("%") != -1) {
        top = dom.style.top;
      }
      // console.log(left, right, top, bottom);
      //当前数值节点的中心
      let lineStart = dom.parentNode; //节点
      let lineStartX =
        lineStart.getBoundingClientRect().left / scale +
        lineStart.getBoundingClientRect().width / scale / 2;
      let lineStartY =
        lineStart.getBoundingClientRect().top / scale +
        lineStart.getBoundingClientRect().height / scale / 2;
      //当前线

      let vLine = dom.parentNode.querySelector(".himm-line-v");
      let hLine = dom.parentNode.querySelector(".himm-line-h");
      //如果按下的是添加文本标签 , 那就设置移动方法
      window.onmousemove = (moveE) => {
        let x = (moveE.clientX - downX) / scale;
        let y = (moveE.clientY - downY) / scale;
        let xPoint = this.rotatePoint(x, y, this.rotateDeg);
        x = xPoint.x;
        y = xPoint.y;
        let obj = {};
        if (this.rotateDeg == 90 || this.rotateDeg == 270) {
          obj.left = parseFloat(left) - (x * 100) / lineStart.clientWidth + "%";
          obj.top = parseFloat(top) - (y * 100) / lineStart.clientHeight + "%";
        } else if (this.rotateDeg == 0 || this.rotateDeg == 180) {
          obj.left = parseFloat(left) + (x * 100) / lineStart.clientWidth + "%";
          obj.top = parseFloat(top) + (y * 100) / lineStart.clientHeight + "%";
        }

        dom.setStyle(obj);
        //!------设置线的位置
        // 当前移动dom的中心点坐标
        let centerX =
          dom.getBoundingClientRect().left / scale +
          dom.getBoundingClientRect().width / scale / 2; //当前元素的中心点坐标
        let centerY =
          dom.getBoundingClientRect().top / scale +
          dom.getBoundingClientRect().height / scale / 2;
        this.rectPosition(
          centerX,
          centerY,
          lineStartX,
          lineStartY,
          vLine,
          hLine
        );
      };
      window.onmouseup = () => {
        window.onmousemove = null;
        window.onmouseup = null;
      };
    },
    //点击的是文本的话 触发的是文本的拖拽事件
    himlineMouseDown1(e) {
      let dom = e.target;
      let transform = dom.parentNode.parentNode.parentNode.style.transform;
      //处理方法缩小
      let scale = 1;
      if (transform.indexOf("scale") != -1) {
        let match = transform.match(/scale\(([^)]+)\)/);
        if (match) {
          scale = parseFloat(match[1].split(",")[0]);
        }
      }
      // console.log(e);
      let downX = e.clientX; //鼠标按下的坐标
      let downY = e.clientY;
      //获取原来文本标签展示的内容left或者right
      let left = null;
      let top = null;
      //使用原来的百分比来操作 ,不使用数值 ,否则放大缩小有问题
      if (dom.style.left && dom.style.left.indexOf("%") != -1) {
        left = dom.style.left;
      }
      if (dom.style.top && dom.style.top.indexOf("%") != -1) {
        top = dom.style.top;
      }
      // console.log(left, right, top, bottom);
      //当前数值节点的中心
      let lineStart = dom.parentNode;
      let lineStartX =
        lineStart.getBoundingClientRect().left / scale +
        lineStart.getBoundingClientRect().width / scale / 2;
      let lineStartY =
        lineStart.getBoundingClientRect().top / scale +
        lineStart.getBoundingClientRect().height / scale / 2;
      //当前线
      let line = dom.parentNode.querySelector(".himm-line");

      //如果按下的是添加文本标签 , 那就设置移动方法
      window.onmousemove = (moveE) => {
        let x = (moveE.clientX - downX) / scale;
        let y = (moveE.clientY - downY) / scale;
        let xPoint = this.rotatePoint(x, y, this.rotateDeg);
        x = xPoint.x;
        y = xPoint.y;
        let obj = {};
        if (this.rotateDeg == 90 || this.rotateDeg == 270) {
          obj.left = parseFloat(left) - (x * 100) / lineStart.clientWidth + "%";
          obj.top = parseFloat(top) - (y * 100) / lineStart.clientHeight + "%";
        } else if (this.rotateDeg == 0 || this.rotateDeg == 180) {
          obj.left = parseFloat(left) + (x * 100) / lineStart.clientWidth + "%";
          obj.top = parseFloat(top) + (y * 100) / lineStart.clientHeight + "%";
        }

        dom.setStyle(obj);
        //!------设置线的位置
        // 当前移动dom的中心点坐标
        let centerX =
          dom.getBoundingClientRect().left / scale +
          dom.getBoundingClientRect().width / scale / 2; //当前元素的中心点坐标
        let centerY =
          dom.getBoundingClientRect().top / scale +
          dom.getBoundingClientRect().height / scale / 2;
        //以线为坐标系的0点 计算中  x值centerX - lineX  y值 lineY - centerY
        let angleDegrees = this.getAngle(
          centerX - lineStartX,
          lineStartY - centerY
        );
        let bevelEdges = this.getBevelEdges(
          centerX - lineStartX,
          lineStartY - centerY
        );
        line.setStyle({
          transform: `rotate(${angleDegrees - this.rotateDeg}deg)`,
          transformOrigin: "left",
          width: bevelEdges + "px",
        });
      };
      window.onmouseup = () => {
        window.onmousemove = null;
        window.onmouseup = null;
      };
    },
    // 旋转坐标点
    rotatePoint(x, y, angle) {
      let radians = (angle * Math.PI) / 180;
      let newX = x * Math.cos(radians) - y * Math.sin(radians);
      let newY = x * Math.sin(radians) + y * Math.cos(radians);
      return { x: newX, y: newY };
    },
    //辅助方法 ---计算一个值在坐标系中角度
    getAngle(x, y) {
      // 计算Δx和Δy
      let deltaX = x - 0;
      let deltaY = y - 0;
      // 计算旋转角度（弧度）
      let angleRadians = Math.atan2(deltaY, deltaX);
      // 将弧度转换为角度
      let angleDegrees = angleRadians * (180 / Math.PI);
      // console.log("旋转角度（弧度）: " + angleRadians);
      // console.log("旋转角度（角度）: " + angleDegrees);
      return -angleDegrees;
    },
    //辅助方法 ---计算直角三角形斜角边的长度
    getBevelEdges(x, y) {
      return Math.sqrt(Math.abs(x) ** 2 + Math.abs(y) ** 2);
    },
    //!---文本拖拽的逻辑结束
    //生成canvas  多生成了宽高各加了300
    createCanvas(img) {
      let canvasold = document.querySelector("canvas");
      canvasold && canvasold.remove();
      let canvas = document.createElement("canvas");
      // canvas.width = img.width + this.extraW;
      // canvas.height = img.height + this.extraH;
      let imageContain = this.$refs.imageContain;
      let angleInRadians = (this.rotateDeg * Math.PI) / 180;
      let rotatedWidth =
        Math.abs(img.width * Math.cos(angleInRadians)) +
        Math.abs(img.height * Math.sin(angleInRadians));
      let rotatedHeight =
        Math.abs(img.width * Math.sin(angleInRadians)) +
        Math.abs(img.height * Math.cos(angleInRadians));
      let newWidth = rotatedWidth + this.extraW;
      let newHeight = rotatedHeight + this.extraH;
      // 设置Canvas的宽高
      canvas.width = newWidth;
      canvas.height = newHeight;
      let ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      // 画布中心点
      let centerX = canvas.width / 2;
      let centerY = canvas.height / 2;
      // 将画布坐标系移动到中心点
      ctx.translate(centerX, centerY);
      // 旋转画布
      ctx.rotate(angleInRadians);
      ctx.drawImage(
        img,
        -img.width / 2,
        -img.height / 2,
        img.width,
        img.height
      );
      this.canvasRect = {
        width: canvas.width,
        height: canvas.height,
      };
      // 恢复画布状态
      ctx.rotate(-angleInRadians);
      ctx.translate(-centerX, -centerY);
      this.createMatrixData(ctx, canvas);
      // canvas = null;
      imageContain.appendChild(canvas);
    },
    //生成矩阵数据
    createMatrixData(ctx, canvas) {
      // 获取canvas上指定矩形区域的像素数据
      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var data = imageData.data;
      // 将像素数据转换成矩阵形式
      var matrix = [];
      for (var i = 0; i < canvas.height; i++) {
        var row = [];
        for (var j = 0; j < canvas.width; j++) {
          var index = (i * canvas.width + j) * 4;
          if (data[index] + data[index + 1] + data[index + 2] < 180 * 3) {
            row.push(1);
          } else {
            row.push(0);
          }
        }
        matrix.push(row);
      }
      // 矩阵数据 2*2处理一下
      // let row = 0
      // let col = 0

      //矩阵数据
      this.matrixData = matrix;
    },
    //把单个序号的矩阵数据都设置成2
    createChangeData(position, index) {
      let img = this.$refs.image;
      let mask = this.$refs.temp.querySelector(".create-div");
      let divPosition = {
        left: position.figuresTag.cx / img.naturalWidth,
        top: position.figuresTag.cy / img.naturalHeight,
        width: position.figuresTag.w / img.naturalWidth,
        height: position.figuresTag.h / img.naturalHeight,
      };
      divPosition = {
        left: Math.ceil(mask.clientWidth * divPosition.left),
        top: Math.ceil(mask.clientHeight * divPosition.top),
        width: Math.ceil(mask.clientWidth * divPosition.width),
        height: Math.ceil(mask.clientHeight * divPosition.height),
      };
      let parCanvasPosition = this.getCanvasSE({
        x: divPosition.left,
        y: divPosition.top,
        w: divPosition.width,
        h: divPosition.height,
      });
      this.drawCanvas({
        x: parCanvasPosition.sColumn,
        y: parCanvasPosition.sRow,
        width: parCanvasPosition.eColumn - parCanvasPosition.sColumn + 1,
        height: parCanvasPosition.eRow - parCanvasPosition.sRow + 1,
      });
      //设置序号对应的矩形区域 在矩阵数据中的值为2
      this.setRectValue(parCanvasPosition, 2);
    },
    //创建单个序号应该展示的位置
    createDiv(position, index) {
      return new Promise(async (resolve, reject) => {
        let img = this.$refs.image;
        let div = document.createElement("div");
        let mask = this.$refs.temp.querySelector(".create-div");
        div.classList.add("himm-image-child");
        let divPosition;
        divPosition = {
          left: position.figuresTag.oldcx / img.naturalWidth,
          top: position.figuresTag.oldcy / img.naturalHeight,
          width: position.figuresTag.oldw / img.naturalWidth,
          height: position.figuresTag.oldh / img.naturalHeight,
        };
        // console.log(divPosition, "divPosition");
        div.setStyle({
          position: "absolute",
          left: divPosition.left * 100 + "%",
          top: divPosition.top * 100 + "%",
          width: divPosition.width * 100 + "%",
          height: divPosition.height * 100 + "%",
          zIndex: this.newData.length + 10 - index, //
        });
        mask && mask.appendChild(div);
        //单个序号的在图中的百分比位置 以及宽高 还是小数 没变成百分比
        let imgRect = img.getBoundingClientRect();
        let divRect = div.getBoundingClientRect();
        //左右上下
        //右
        if (divRect.left - imgRect.left > imgRect.width / 2) {
          if (divRect.top - imgRect.top > imgRect.height / 2) {
            div.setAttribute("direction", "right-bottom");
          } else {
            div.setAttribute("direction", "right-top");
          }
        } else {
          if (divRect.top - imgRect.top > imgRect.height / 2) {
            div.setAttribute("direction", "left-bottom");
          } else {
            div.setAttribute("direction", "left-top");
          }
        }
        //暂时之分左右
        // div.setAttribute(
        //   "direction",
        //   divRect.left - imgRect.left > imgRect.width / 2 ? "right" : "left"
        // );
        let canvasceshi = {
          left: position.figuresTag.cx / img.naturalWidth,
          top: position.figuresTag.cy / img.naturalHeight,
          width: position.figuresTag.w / img.naturalWidth,
          height: position.figuresTag.h / img.naturalHeight,
        };

        divPosition = {
          left: Math.ceil(mask.clientWidth * canvasceshi.left),
          top: Math.ceil(mask.clientHeight * canvasceshi.top),
          width: Math.ceil(mask.clientWidth * canvasceshi.width),
          height: Math.ceil(mask.clientHeight * canvasceshi.height),
          oriW: (mask.clientWidth * canvasceshi.width).toFixed(3),
          oriH: (mask.clientHeight * canvasceshi.height).toFixed(3),
        };
        // console.log(divPosition, "divPosition");
        //把所有的序号在图上标注 并且得到序号在canvas矩阵中的起始行列数  序号的坐标
        let parCanvasPosition = this.getCanvasSE({
          x: divPosition.left,
          y: divPosition.top,
          w: divPosition.width,
          h: divPosition.height,
        });
        // console.log("parCanvasPosition", parCanvasPosition);
        // 设置文本内容展示
        await this.setTextNode(
          div,
          position,
          index,
          divPosition,
          parCanvasPosition,
          mask
        );
        resolve();
      });
    },
    //!---设置文本标签的位置
    //创建每个附属文本应该展示的内容还有放置的位置
    /*
      pardom: 序号对应位置
      index:当前执行到第几个续好了
      pardomPosition:序号对应的坐标系数
      parCanvasPosition: 序号对应的canvas矩阵中的起始行列数
      mask: 遮罩层
      目的:得到每个文本应该展示的实际大小宽高
    */
    async setTextNode(
      pardom,
      position,
      index,
      pardomPosition,
      parCanvasPosition,
      mask
    ) {
      //拿到文本
      let text = position.figuresTag.markNum + position.figuresTag.word;
      const textNode = document.createElement("div");
      textNode.innerText = text;
      textNode.setStyle({
        position: "absolute",
        top: "-1000px",
        width: "max-content",
        transform: `rotate(${-this.rotateDeg}deg)`,
      });
      let body = document.querySelector("body");
      body.appendChild(textNode);
      let textPosition = {
        tW: Math.ceil(textNode.clientWidth),
        tH: Math.ceil(textNode.clientHeight),
      };
      // console.log(textPosition, ";textPosition");
      //得到文本标签的最终位置
      let canvasTextPosition = await this.getTextPosition(
        pardom,
        parCanvasPosition,
        textPosition
      );
      // console.log(canvasTextPosition, "子");
      // console.log(parCanvasPosition, "结束");
      //算出文本标签距离序号的位置 , 然后插入
      let imgTextPosition = this.getImgSE(
        canvasTextPosition,
        parCanvasPosition,
        pardomPosition
      );
      // console.log(imgTextPosition, "111111");
      textNode.remove();
      //新生成的文本节点 ,
      let textNodeNew = this.insertTextNode(
        imgTextPosition,
        text,
        pardom,
        textPosition
      );
      //判断是否自动生成线条
      let isAutoLine = this.isAutoCreateLine(
        imgTextPosition,
        textPosition,
        pardomPosition
      );
      // console.log(isAutoLine);
      //设置默认的文本与序号之间的位置
      this.setDragLine(pardom, isAutoLine, textNodeNew);
      return;
    },
    //插入文本标签放进dom中textPosition
    insertTextNode(imgTextPosition, text, div, textPosition) {
      let textNode = document.createElement("div");
      let span = document.createElement("span");
      span.innerText = text;
      span.classList.add("himm-text-span");
      span.setStyle({
        background: "rgba(255,255,255,0.7)",
      });
      textNode.appendChild(span);
      // textNode.innerText = text;
      textNode.classList.add("himm-text");
      let obj = {
        position: "absolute",
        width: "max-content",
        zIndex: 2,
        cursor: "pointer",
        transformOrigin: "left top",
        transform: `rotate(${-this.rotateDeg}deg)`,
      };
      obj.top = imgTextPosition.top;
      obj.left = imgTextPosition.left;
      textNode.setStyle(obj);
      div.appendChild(textNode);
      return textNode;
    },
    //辅助方法--得到合适的位置去放置该文本标签
    /*
      parCanvasPosition:"序号区域对应的在矩阵中起始行列值"
      textPosition:要放置的文本宽高
      pardom:序号dom
    */
    getTextPosition(pardom, parCanvasPosition, textPosition) {
      return new Promise((resolve, reject) => {
        parCanvasPosition = JSON.parse(JSON.stringify(parCanvasPosition));
        let direction = pardom.getAttribute("direction");
        //在文本标签在canvas中的基础位置
        let basicCanvasPosition = this.getTextBasic(
          parCanvasPosition,
          textPosition,
          direction
        );
        // console.log("basicCanvasPosition", basicCanvasPosition);
        // console.log(basicCanvasPosition, "basicCanvasPosition");
        //当前位置是否在黑色之上 , 如果是则需要移动起来找到不在黑色之上的
        let bool = this.isUpperBlack(basicCanvasPosition);
        if (bool) {
          this.work && this.work.terminate();
          this.work = new Worker("/work.js");
          // console.log(2222);
          this.work.postMessage({
            position: {
              basicCanvasPosition,
              parCanvasPosition,
              direction,
            },
            matrixData: this.matrixData,
          });
          this.work.onmessage = (e) => {
            let basicCanvasPosition = e.data.basicCanvasPosition;
            // console.log(
            //   basicCanvasPosition,
            //   "basicCanvasPosition",
            //   parCanvasPosition
            // );
            //如果当前位置适合放置,那就放置在当前位置 , 并且更新矩形数据中的位置
            this.drawCanvas({
              x: basicCanvasPosition.sColumn,
              y: basicCanvasPosition.sRow,
              width:
                basicCanvasPosition.eColumn - basicCanvasPosition.sColumn + 1,
              height: basicCanvasPosition.eRow - basicCanvasPosition.sRow + 1,
            });
            //设置对应矩阵数据的值为1
            this.setRectValue(basicCanvasPosition);

            // 返回值 当前文本标签在canvas中的位置
            resolve(basicCanvasPosition);
          };
          // basicCanvasPosition = this.GetOkPosition(
          //   basicCanvasPosition,
          //   parCanvasPosition,
          //   direction
          // );
        } else {
          this.drawCanvas({
            x: basicCanvasPosition.sColumn,
            y: basicCanvasPosition.sRow,
            width:
              basicCanvasPosition.eColumn - basicCanvasPosition.sColumn + 1,
            height: basicCanvasPosition.eRow - basicCanvasPosition.sRow + 1,
          });
          this.setRectValue(basicCanvasPosition);
          resolve(basicCanvasPosition);
        }
      });
    },
    isAutoCreateLine(imgTextPosition, textPosition, pardomPosition) {
      let bool = false;
      //如果left 往右
      if (parseFloat(imgTextPosition.left) > 0) {
        //往右移动大于110 就应该自定生成指向线了
        if (parseFloat(imgTextPosition.left) > 110) {
          bool = true;
          return bool;
        }
      }
      //如果top往下
      if (parseFloat(imgTextPosition.top) > 0) {
        //往下超过了110 说明往下超出了 应该自定生成指向线了
        if (parseFloat(imgTextPosition.top) > 110) {
          bool = true;
          return bool;
        }
      }
      //top往上 或者 left 往左
      //最大限制就往上文本自己的宽度之后再加上10
      //最大限制就往左文本自己的宽度之后再加上10
      let maxLeftNegative = (textPosition.tW * 100) / pardomPosition.width + 10;
      let maxTopNegative = (textPosition.tH * 100) / pardomPosition.height + 10;
      if (
        Math.abs(parseFloat(imgTextPosition.left)) > maxLeftNegative ||
        Math.abs(parseFloat(imgTextPosition.top)) > maxTopNegative
      ) {
        bool = true;
        return bool;
      }
      return bool;
    },
    //?---辅助方法--给定一个起始坐标以及宽高得到该矩形区域在canvas中的坐标 即起始行列数
    getCanvasSE({ x, y, w, h }) {
      x = Math.ceil(x) + this.extraW / 2;
      y = Math.ceil(y) + this.extraH / 2;
      w = Math.ceil(w);
      h = Math.ceil(h);
      // this.drawCanvas({
      // 	x: x,
      // 	y: y,
      // 	width: w,
      // 	height: h
      // });

      return {
        sRow: y,
        sColumn: x,
        eRow: y + h,
        eColumn: x + w,
      };
    },
    //辅助方法--给定一个在当前canvas中的坐标算出其在图片上应该防止的left以及top百分比值
    getImgSE(canvasTextPosition, parCanvasPosition, pardomPosition) {
      // console.log(this.rotateDeg, "角度");
      let left, top;
      if (this.rotateDeg == 90) {
        let ceshi = { ...canvasTextPosition };
        canvasTextPosition = {
          sRow: ceshi.sRow,
          eRow: ceshi.sRow + (ceshi.eColumn - ceshi.sColumn + 1),
          sColumn: ceshi.sColumn - (ceshi.eRow - ceshi.sRow + 1),
          eColumn: ceshi.sColumn,
        };
        // console.log(canvasTextPosition, "90度");
        left =
          ((canvasTextPosition.sRow - parCanvasPosition.sRow) * 100) /
            (parCanvasPosition.eRow - parCanvasPosition.sRow) +
          "%";
        top =
          ((parCanvasPosition.eColumn - canvasTextPosition.eColumn) * 100) /
            (parCanvasPosition.eColumn - parCanvasPosition.sColumn) +
          "%";
      } else if (this.rotateDeg == 180) {
        let ceshi = { ...canvasTextPosition };
        canvasTextPosition = {
          sRow: ceshi.sRow - (ceshi.eRow - ceshi.sRow + 1),
          eRow: ceshi.sRow,
          sColumn: ceshi.sColumn - (ceshi.eColumn - ceshi.sColumn + 1),
          eColumn: ceshi.sColumn,
        };
        left =
          ((parCanvasPosition.eColumn - canvasTextPosition.eColumn) * 100) /
            (parCanvasPosition.eColumn - parCanvasPosition.sColumn) +
          "%";
        top =
          ((parCanvasPosition.eRow - canvasTextPosition.eRow) * 100) /
            (parCanvasPosition.eRow - parCanvasPosition.sRow) +
          "%";
      } else if (this.rotateDeg == 270) {
        let ceshi = { ...canvasTextPosition };
        canvasTextPosition = {
          sRow: ceshi.sRow - (ceshi.eColumn - ceshi.sColumn + 1),
          eRow: ceshi.sRow,
          sColumn: ceshi.sColumn,
          eColumn: ceshi.sColumn + (ceshi.eRow - ceshi.sRow + 1),
        };
        left =
          ((parCanvasPosition.eRow - canvasTextPosition.eRow) * 100) /
            (parCanvasPosition.eRow - parCanvasPosition.sRow) +
          "%";
        top =
          ((canvasTextPosition.sColumn - parCanvasPosition.sColumn) * 100) /
            (parCanvasPosition.eColumn - parCanvasPosition.sColumn) +
          "%";
      } else if (this.rotateDeg == 0) {
        // console.log(22222);
        left =
          ((canvasTextPosition.sColumn - parCanvasPosition.sColumn) * 100) /
            pardomPosition.oriW +
          "%";
        top =
          ((canvasTextPosition.sRow - parCanvasPosition.sRow) * 100) /
            pardomPosition.oriH +
          "%";
      }

      return {
        left,
        top,
      };
    },
    //辅助方法--给定矩阵初始行列值 , 设置对应的矩形区域的所有值为1 , 代表已经占用
    setRectValue({ sRow, eRow, sColumn, eColumn }, mark = 2) {
      for (let i = sRow; i <= eRow; i++) {
        for (let j = sColumn; j <= eColumn; j++) {
          if (
            this.matrixData[i] &&
            typeof this.matrixData[i][j] !== "undefined"
          ) {
            this.matrixData[i][j] = mark;
          }
        }
      }
    },
    //辅助方法--测试使用, 在对应canvas上画出序号占用的位置,实际用的已经是矩阵数据来操作了
    drawCanvas(obj) {
      // return;
      //?-----没用了
      if (!this.$refs.imageContain) {
        return;
      }
      let canvas = this.$refs.imageContain.querySelector("canvas");
      let ctx = canvas.getContext("2d");
      function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
      // 调用函数获取随机颜色
      var randomColor = getRandomColor();
      ctx.fillStyle = randomColor;
      ctx.fillRect(obj.x, obj.y, obj.width, obj.height);
    },
    //辅助函数--当前区域是否占用黑色区域小于百分之10 , 小于的话就是false , 大于就是在黑色之上true , 规则是最多占用百分之10
    //判断当前是否占用序号
    isUpperBlack({ sRow, eRow, sColumn, eColumn }) {
      let maxNum = Math.ceil((eRow - sRow + 1) * (eColumn - sColumn + 1) * 0.1);
      let OneNum = 0;
      let bool = false;
      for (let i = sRow; i <= eRow; i++) {
        if (bool) {
          break;
        }
        for (let j = sColumn; j <= eColumn; j++) {
          if (
            this.matrixData[i] &&
            typeof this.matrixData[i][j] !== "undefined" &&
            (this.matrixData[i][j] == 2 || this.matrixData[i][j] == 1)
          ) {
            bool = true;
            break;
          }
          if (
            this.matrixData[i] &&
            typeof this.matrixData[i][j] !== "undefined" &&
            this.matrixData[i][j] == 1
          ) {
            OneNum++;
            if (maxNum < OneNum) {
              bool = true;
              break;
            }
          }
        }
      }
      return bool;
    },
    //辅助函数--传参一个基准区域,实际文本大小,还有方向,得到文本应该被放置的基础位置//左右开始寻找的基础方向不一致
    // getTextBasic({ sRow, eRow, sColumn, eColumn }, { tW, tH }, direction) {
    //   let positionMap = {
    //     //从左边开始顺时针
    //     // top: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
    //     //   return {
    //     //     sRow: sRow,
    //     //     eRow: sRow + tH - 1,
    //     //     sColumn: sColumn - tW,
    //     //     eColumn: sColumn - 1,
    //     //   };
    //     // },
    //     // //从右边开始顺时针
    //     // bottom: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
    //     //   return {
    //     //     sRow: sRow,
    //     //     eRow: sRow + tH - 1,
    //     //     sColumn: eColumn + 1,
    //     //     eColumn: eColumn + tW,
    //     //   };
    //     // },
    //     right: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
    //       return {
    //         sRow: sRow,
    //         eRow: sRow + tH - 1,
    //         sColumn: eColumn + 1,
    //         eColumn: eColumn + tW,
    //       };
    //     },
    //     left: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
    //       return {
    //         sRow: sRow,
    //         eRow: sRow + tH - 1,
    //         sColumn: sColumn - tW,
    //         eColumn: sColumn - 1,
    //       };
    //     },
    //     // top: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
    //     //   return {
    //     //     sRow: sRow - tH,
    //     //     eRow: sRow - 1,
    //     //     sColumn: sColumn,
    //     //     eColumn: sColumn + tW,
    //     //   };
    //     // },
    //     // bottom: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
    //     //   return {
    //     //     sRow: eRow - 1,
    //     //     eRow: eRow + tH,
    //     //     sColumn: sColumn,
    //     //     eColumn: sColumn + tW,
    //     //   };
    //     // },
    //   };
    //   let textBasic = positionMap[direction](
    //     {
    //       sRow,
    //       eRow,
    //       sColumn,
    //       eColumn,
    //     },
    //     { tW, tH }
    //   );
    //   return textBasic;
    // },
    getTextBasic({ sRow, eRow, sColumn, eColumn }, { tW, tH }, direction) {
      let positionMap = {
        //从左边开始顺时针
        // top: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
        //   return {
        //     sRow: sRow,
        //     eRow: sRow + tH - 1,
        //     sColumn: sColumn - tW,
        //     eColumn: sColumn - 1,
        //   };
        // },
        //从上面开始顺时针
        top: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
          return {
            sRow: sRow - tH,
            eRow: sRow - 1,
            sColumn: sColumn,
            eColumn: sColumn + tW - 1,
          };
        },
        //从右边开始顺时针
        bottom: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
          return {
            sRow: sRow,
            eRow: sRow + tH - 1,
            sColumn: eColumn + 1,
            eColumn: eColumn + tW,
          };
        },
        // right: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
        //   return {
        //     sRow: sRow,
        //     eRow: sRow + tH - 1,
        //     sColumn: eColumn + 1,
        //     eColumn: eColumn + tW,
        //   };
        // },
        // left: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
        //   return {
        //     sRow: sRow,
        //     eRow: sRow + tH - 1,
        //     sColumn: sColumn - tW,
        //     eColumn: sColumn - 1,
        //   };
        // },
        // top: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
        //   return {
        //     sRow: sRow - tH,
        //     eRow: sRow - 1,
        //     sColumn: sColumn,
        //     eColumn: sColumn + tW,
        //   };
        // },
        // bottom: ({ sRow, eRow, sColumn, eColumn }, { tW, tH }) => {
        //   return {
        //     sRow: eRow - 1,
        //     eRow: eRow + tH,
        //     sColumn: sColumn,
        //     eColumn: sColumn + tW,
        //   };
        // },
      };
      let textBasic = positionMap[direction.split("-")[1]](
        {
          sRow,
          eRow,
          sColumn,
          eColumn,
        },
        { tW, tH }
      );
      return textBasic;
    },
    setDragLine(pardom, isAutoLine, textNodeNew) {
      // console.log(isAutoLine);
      //竖线
      let vLine = document.createElement("div");
      vLine.classList.add("himm-line-v");
      vLine.setStyle({
        position: "absolute",
        zIndex: -1,
        width: "1px",
        background: "#7697FF",
      });
      textNodeNew.appendChild(vLine);
      //横线
      let hLine = document.createElement("div");
      hLine.classList.add("himm-line-h");
      hLine.setStyle({
        position: "absolute",
        zIndex: -1,
        left: "50%",
        top: "50%",
        height: "1px",
        background: "#7697FF",
      });
      textNodeNew.appendChild(hLine);
      if (isAutoLine) {
        //自动生成线条的逻辑
        this.autoCreateLine(pardom, textNodeNew, vLine, hLine);
      }
    },
    //设置可拖拽指向线
    setDragLine1(pardom, isAutoLine, textNodeNew) {
      // console.log(isAutoLine);
      let line = document.createElement("div");
      line.classList.add("himm-line");
      line.setStyle({
        width: "0px",
        height: "1px",
        background: "blue",
        position: "absolute",
        left: "50%",
        top: " 50%",
      });
      pardom.appendChild(line);
      if (isAutoLine) {
        //自动生成线条的逻辑
        this.autoCreateLine(pardom, textNodeNew, line);
      }
    },
    autoCreateLine(pardom, textNodeNew, vLine, hLine) {
      let lineStartX =
        pardom.getBoundingClientRect().left +
        pardom.getBoundingClientRect().width / 2;
      let lineStartY =
        pardom.getBoundingClientRect().top +
        pardom.getBoundingClientRect().height / 2;
      let centerX =
        textNodeNew.getBoundingClientRect().left +
        textNodeNew.getBoundingClientRect().width / 2; //当前元素的中心点坐标
      let centerY =
        textNodeNew.getBoundingClientRect().top +
        textNodeNew.getBoundingClientRect().height / 2;
      this.rectPosition(
        centerX,
        centerY,
        lineStartX,
        lineStartY,

        vLine,
        hLine
      );
    },
    rectPosition(centerX, centerY, lineStartX, lineStartY, vLine, hLine) {
      let width = centerX - lineStartX;
      let height = centerY - lineStartY;
      hLine.setStyle({
        left: "unset",
        right: "unset",
        top: "unset",
        bottom: "unset",
        transform: "none",
      });
      vLine.setStyle({
        left: "unset",
        right: "unset",
        top: "unset",
        bottom: "unset",
        transform: "none",
      });
      if (height > 0) {
        if (width > 0) {
          vLine.setStyle({
            height: Math.abs(height) + "px",
            right: "50%",
            bottom: "50%",
            transform: `translateX(${-width}px)`,
          });
        } else {
          vLine.setStyle({
            height: Math.abs(height) + "px",
            left: "50%",
            bottom: "50%",
            transform: `translateX(${-width}px`,
          });
        }
      } else {
        if (width > 0) {
          vLine.setStyle({
            height: Math.abs(height) + "px",
            right: "50%",
            top: "50%",
            transform: `translateX(${-width}px)`,
          });
        } else {
          vLine.setStyle({
            height: Math.abs(height) + "px",
            left: "50%",
            top: "50%",
            transform: `translateX(${-width}px)`,
          });
        }
      }
      if (width > 0) {
        if (height > 0) {
          hLine.setStyle({
            right: "50%",
            bottom: "50%",
            width: Math.abs(width) + "px",
            transformOrigin: "left",
          });
        } else {
          hLine.setStyle({
            right: "50%",
            top: "50%",
            width: Math.abs(width) + "px",
            transformOrigin: "left",
          });
        }
      } else {
        if (height > 0) {
          hLine.setStyle({
            left: "50%",
            bottom: "50%",
            width: Math.abs(width) + "px",
          });
        } else {
          hLine.setStyle({
            left: "50%",
            top: "50%",
            width: Math.abs(width) + "px",
          });
        }
      }
    },
    //自动生成指向线
    autoCreateLine1(pardom, textNodeNew, line) {
      let lineStartX =
        pardom.getBoundingClientRect().left +
        pardom.getBoundingClientRect().width / 2;
      let lineStartY =
        pardom.getBoundingClientRect().top +
        pardom.getBoundingClientRect().height / 2;
      let centerX =
        textNodeNew.getBoundingClientRect().left +
        textNodeNew.getBoundingClientRect().width / 2; //当前元素的中心点坐标
      let centerY =
        textNodeNew.getBoundingClientRect().top +
        textNodeNew.getBoundingClientRect().height / 2;

      //以线为坐标系的0点 计算中  x值centerX - lineX  y值 lineY - centerY
      let angleDegrees = this.getAngle(
        centerX - lineStartX,
        lineStartY - centerY
      );
      let bevelEdges = this.getBevelEdges(
        centerX - lineStartX,
        lineStartY - centerY
      );
      line.setStyle({
        transform: `rotate(${angleDegrees - this.rotateDeg}deg)`,
        transformOrigin: "left",
        width: (bevelEdges * 100) / pardom.clientWidth + "%",
      });
    },
    //!---设置文本标签的位置结束

    maskDoubleclick(e) {
      //如果是双击的空白处就新建文本内容
      if (e.target.classList.contains("create-div")) {
        this.openNewText(e);
      } else if (e.target.classList.contains("pardom")) {
        this.openNewText(e);
      }
      //修改逻辑
      else if (e.target.classList.contains("himm-text")) {
        // 变成了修改逻辑
        this.updateText(e);
      }
    },
    //!-----关于点击空白处双击的逻辑-----
    openNewText(e) {
      // console.log("说明双击点击的是遮罩层");
      if (!this.isCreateNewText) {
        let mask = this.$refs.imageContain.querySelector(".create-div");
        let imagePatent = this.$refs.imageContain.querySelector(".pardom");
        let transform = this.$refs.temp.style.transform;
        //处理方法缩小
        let scale = 1;
        if (transform.indexOf("scale") != -1) {
          let match = transform.match(/scale\(([^)]+)\)/);
          if (match) {
            scale = parseFloat(match[1].split(",")[0]);
          }
        }
        let imagePatentRect = imagePatent.getBoundingClientRect();
        let imagePatentX = imagePatentRect.left;
        let imagePatentY = imagePatentRect.top;
        let x =
          ((e.clientX - imagePatentX) * 100) / imagePatent.clientWidth / scale;
        let y =
          ((e.clientY - imagePatentY) * 100) / imagePatent.clientHeight / scale;
        this.dragAddPosition = {
          left: x,
          top: y,
        };
        let xText =
          ((e.clientX + 40 * scale - imagePatentX) * 100) /
          imagePatent.clientWidth /
          scale;
        this.inputPosition = {
          left: xText,
          top: y,
        };
        // console.log(this.dragAddPosition);
        this.isCreateNewText = true;
        this.isUpdateText = false;
      }
    },
    async updateText(e) {
      let imageContain = this.$refs.temp;
      let transform = imageContain.style.transform;
      //处理方法缩小
      let scale = 1;
      if (transform.indexOf("scale") != -1) {
        let match = transform.match(/scale\(([^)]+)\)/);
        if (match) {
          scale = parseFloat(match[1].split(",")[0]);
        }
      }
      // console.log(scale);
      let textRect = e.target.getBoundingClientRect();
      let tempRect = imageContain.getBoundingClientRect();
      // console.log(textRect, tempRect);
      let left =
        ((textRect.left - tempRect.left) * 100) /
        imageContain.clientWidth /
        scale;
      // console.log(left);
      let top =
        ((textRect.top - tempRect.top + textRect.height + 5) * 100) /
        imageContain.clientHeight /
        scale;

      this.inputPosition = {
        left,
        top,
      };
      this.isCreateNewText = true;
      this.isUpdateText = true;
    },
    //新建文本生成内容标签
    addTextNode(params) {
      // console.log(params);
      let temp = this.$refs.temp;
      let dom = this.$refs.dragAdd.$el;
      let img = this.$refs.image;
      let domRect = dom.getBoundingClientRect();
      let tempRect = temp.getBoundingClientRect();
      let imgRect = img.getBoundingClientRect();
      let left, top, width, height;
      //分情况 , 看角度
      if (this.rotateDeg == 0) {
        left =
          (((temp.clientWidth * parseFloat(dom.style.left)) / 100 -
            img.offsetLeft) /
            img.width) *
          img.naturalWidth;
        top =
          (((temp.clientHeight * parseFloat(dom.style.top)) / 100 -
            img.offsetTop) /
            img.height) *
          img.naturalHeight;
        width = (parseFloat(dom.style.width) / img.width) * img.naturalWidth;
        height =
          (parseFloat(dom.style.height) / img.height) * img.naturalHeight;
      } else if (this.rotateDeg == 90) {
        left = ((domRect.top - imgRect.top) / img.width) * img.naturalWidth;
        top =
          ((img.height - (domRect.left - imgRect.left) - domRect.width) /
            img.height) *
          img.naturalHeight;
        width = (domRect.height / img.height) * img.naturalHeight;
        height = (domRect.width / img.width) * img.naturalWidth;
      } else if (this.rotateDeg == 180) {
        left =
          ((img.width - (domRect.left - imgRect.left + domRect.width)) /
            img.width) *
          img.naturalWidth;
        top =
          ((img.height - (domRect.top - imgRect.top + domRect.height)) /
            img.height) *
          img.naturalHeight;
        width = (domRect.width / img.width) * img.naturalWidth;
        height = (domRect.height / img.height) * img.naturalHeight;
      } else if (this.rotateDeg == 270) {
        left =
          ((img.width - (domRect.top - imgRect.top + domRect.height)) /
            img.width) *
          img.naturalWidth;
        top = ((domRect.left - imgRect.left) / img.height) * img.naturalHeight;
        width = (domRect.height / img.width) * img.naturalWidth;
        height = (domRect.width / img.height) * img.naturalHeight;
      }
      let box = {
        cx: left.toFixed(2),
        cy: top.toFixed(2),
        w: width.toFixed(2),
        h: height.toFixed(2),
      };

      console.log(box);
    },
  },
};
</script>

<style lang="less" scoped>
.imageContain {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 30px;
  box-sizing: border-box;
}
.create-div {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pardom {
  width: 80%;
  height: 60%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  box-sizing: border-box;
  img {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    // width: 484.81px;
    // height: 482.16px;
  }
}
/deep/ .pointDot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #3a7afe;
  transform: translate(-50%, -50%);
  cursor: se-resize;
  &[data-side*="right"] {
    transform: translate(50%, -50%);
  }
  &[data-side*="bottom"] {
    transform: translate(-50%, 50%);
  }
  &[data-side="bottom-right"] {
    transform: translate(50%, 50%);
  }
}
/deep/ .newTextInput {
  background-color: red;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}
/deep/ .inputText {
  outline: none;
  display: block;
  width: 50%;
  height: 20px;
}
/deep/ .himm-text {
  background-color: #fff;
  color: #1c4cba;
  user-select: none;
}
</style>
